<template>
<div class="dabig">
  <van-nav-bar
  title="发布房源"
  left-arrow
  @click-left="onClickLeft"
/>
<p class="am-list-header house">房源信息</p>
<van-cell title="小区名称" is-link :value="cummity" to='/xqname'/>
 <van-field
    label="租金"
    placeholder="请输入小区名称"
    v-model="price"
  >
  <template #extra>
    ￥/月
  </template>
  </van-field>
  <van-field
    label="建筑面积"
    placeholder="0"
    v-model="size"
  >
  <template #extra>
    m²
  </template>
 </van-field>
<!-- <van-cell title="户型" @click="showPopup" is-link value="请选择" />
<van-cell title="所在楼层" @click="showPopup" is-link value="请选择" /> -->
<!-- ------------------------------------------- -->
<!-- 文档  选择器中配合弹出层使用的方法 -->
<van-field
  readonly
  clickable
  label="户型"
  :value="value1"
  placeholder="请选择"
  @click="showPicker1 = true"
  right-icon="arrow"
  input-align="right"
>
</van-field>
<van-popup v-model="showPicker1" round position="bottom">
  <van-picker
    show-toolbar
    :columns="columns1"
    @cancel="showPicker1 = false"
    @confirm="onConfirm1"
  />
</van-popup>
<!-- --------------------------------------------- -->
<van-field
  readonly
  clickable
  label="所在楼层"
  :value="value2"
  placeholder="请选择"
  @click="showPicker2 = true"
  right-icon="arrow"
  input-align="right"
>
</van-field>
<van-popup v-model="showPicker2" round position="bottom">
  <van-picker
    show-toolbar
    :columns="columns2"
    @cancel="showPicker2 = false"
    @confirm="onConfirm2"
  />
</van-popup>
<!-- ----------------------------- -->
<van-field
  readonly
  clickable
  label="朝向"
  :value="value3"
  placeholder="请选择"
  @click="showPicker3 = true"
  right-icon="arrow"
  input-align="right"
>
</van-field>
<van-popup v-model="showPicker3" round position="bottom">
  <van-picker
    show-toolbar
    :columns="columns3"
    @cancel="showPicker3 = false"
    @confirm="onConfirm3"
  />
</van-popup>
<!-- --------------------------------- -->
<p class="house">房屋标题</p>
<van-field v-model="title"  placeholder="请输入标题(例如：整租 小区名 2室 5000元)" />
<p class="house">房屋图像</p>
<van-uploader :after-read="afterRead" />

  <p class="house pz">房屋配置</p>
<van-grid :column-num="5" :clickable='true'><!-- 是否开启格子点击反馈 -->
  <!--遍历 mySupporting  icon方格-->
  <van-grid-item v-for="(item,index) in mySupporting" :key='index' :icon="item.icon" :text="item.label" @click="clickFn(item.label,index)" :class='{active:iconLightIndex.indexOf(index)>-1}'/><!-- iconLightIndex里的才高亮 -->
</van-grid>

<div class="bg">
  <p class="house dc">房屋描述</p>
  <div class="dc2"><van-field v-model="value"  placeholder="请输入房屋描述信息" type="textarea"/></div>
</div>
<div class="bottom">
  <van-button plain type="primary">取消</van-button>
  <van-button type="primary" @click="submitFn()">提交</van-button>
</div>
</div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'gotorent_page',
  data () {
    return {
      price: '',
      size: '',
      title: '',
      show: false,
      value: '',
      value1: '',
      value2: '',
      value3: '',
      showPicker1: false,
      showPicker2: false,
      showPicker3: false,
      columns1: [], /* 户型 */
      columns2: '', // 楼层
      columns3: '', // 朝向
      cummity: '', // 渲染的小区名称
      floor: '',
      roomType: '',
      oriented: '',
      valueFloor: '',
      valueroomType: '',
      valueoriented: '',
      iconarr: ['tv-o', 'refund-o', 'delete-o', 'hotel-o', 'cluster-o', 'other-pay', 'desktop-o', 'bar-chart-o', 'gift-card-o', 'fire-o'], // 房屋配置图标
      mySupporting: '',
      iconLightIndex: [], // 在数组中的index控制高亮
      houseImg: '',
      iconLightLabel: []// 点击高亮的数组
    }
  },
  async created () {
    /* 存小区名字 */
    this.cummity = localStorage.getItem('communityName')
    /* 发布房源的请求数据 */
    const res = await request.get('/houses/params')
    console.log(res)
    /* 楼层 floor */
    this.floor = res.body.floor
    this.columns2 = this.floor.map(item => item.label)
    console.log(this.columns2)
    /* 户型 roomType */
    this.roomType = res.body.roomType
    this.columns1 = this.roomType.map(item => item.label)
    console.log(this.columns1)
    /* 朝向 oriented */
    this.oriented = res.body.oriented
    this.columns3 = this.oriented.map(item => item.label)
    console.log(this.columns3)
    /* mySupporting 房屋配置的label和value */
    let i = 0
    this.mySupporting = res.body.supporting.map(item => {
      return {
        ...item,
        icon: this.iconarr[i++]/* 先计算后加加 */
      }
    }
    )
    console.log(this.mySupporting)
  },
  methods: {
    showPopup () {
      this.show = false
    },
    onClickLeft () {
      this.$router.back()
    },
    /* 上传图像 */
    async afterRead (file) {
    // console.log(file)
    // 1.创建一个空对象实例
      const formData = new FormData()
      // 2.追加
      formData.append('file', file.file)
      // 3. 请求数据
      const res = await request.post('/houses/image', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      })
      // 此时可以自行将文件上传至服务器
      console.log(res)
      // 4.存data中
      this.houseImg = res.body[0]
    },
    /* 确认时 渲染 关闭选择器 */
    onConfirm2 (value, index) {
      console.log(value)// 这里的value其实是label 是形参
      console.log(this.floor)
      this.value2 = value
      this.showPicker2 = false
      // this.floor里有label和value  find返回一个对象  .value拿到户型对应的value,这里的value是标识
      this.valueFloor = this.floor.find(item => item.label === value).value
    },
    onConfirm1 (value, index) {
      console.log(value)
      this.value1 = value
      this.showPicker1 = false
      /* 拿到 楼层对应的value */
      this.valueroomType = this.roomType.find(item => item.label === value).value
      console.log(this.valueroomType)
    },
    onConfirm3 (value, index) {
      console.log(value)
      this.value3 = value
      this.showPicker3 = false
      /* 拿到朝向对应的value */
      this.valueoriented = this.oriented.find(item => item.label === value).value
      console.log(this.valueoriented)
    },
    /* 提交 */
    async submitFn () {
      // console.log(this.iconLightLabel)
      // .iconLightLabel = this.iconLightLabel.join('|')
      /* console.log(this.valueFloor, this.valueroomType, this.valueoriented, this.houseImg)
      console.log(this.cummity, this.value1, this.value2, this.value3, this.title, this.size, this.price, this.value) */

      const res = await request.post('/user/houses', {
        title: this.title,
        description: this.value,
        houseImg: this.houseImg,
        oriented: this.valueoriented,
        supporting: this.iconLightLabel.join('|'),
        price: this.price,
        roomType: this.valueroomType,
        size: this.size,
        floor: this.valueFloor,
        community: localStorage.getItem('community')
      })
      console.log(res)
    },
    /* 点击房屋配置图标 */
    clickFn (label, index) {
      console.log(label, index)// 点击图标的名字和下标
      if (this.iconLightLabel.indexOf(label) === -1) {
        this.iconLightLabel.push(label)
      } else {
        this.iconLightLabel.splice(this.iconLightLabel.indexOf(label), 1)// indexOf返回的是iconLightIndex（空数组）中的下标
      }
      // 控制高亮的index数组中没有这个索引就追加，有就删除
      if (this.iconLightIndex.indexOf(index) === -1) {
        this.iconLightIndex.push(index)
      } else {
        this.iconLightIndex.splice(this.iconLightIndex.indexOf(index), 1)// indexOf返回的是iconLightIndex（空数组）中的下标
      }
    }
  }

}

</script>

<style lang='less' scoped>
/* 房屋配置图标颜色 */
.active{
  color:#54ce9b
}
.bottom{
  position: fixed;
  bottom: 0;
}
.dc{
  margin-top: 20px;
  margin-bottom: 20px;

}
body{
  background-color: #f6f5f6;;
}
.van-button{
  width: 187px;
  height: 45px;
}
.am-list-header{
    color: #21b97a;
    background-color: #fff;
    font-size: 15px;
}
.house{
  font-size: 14px;
  margin-left: 15px;
  margin-bottom: 0;
}
.dabig{
  margin-bottom: 150px;
}
</style>
